<template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide
            v-for="(slide, index) in slides"
            :key="index"
        >
            <div class="slide-wrapper">
                <div class="title">{{ slide.title }}</div>
                <div class="tips">{{ slide.tips }}</div>
                <img class="picture" src="@/assets/image/picture@2x.png">
            </div>
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination"></div>
    </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import {swiper, swiperSlide} from 'vue-awesome-swiper';

export default {
    name: 'DcSwiper',
    components: {
        swiper,
        swiperSlide,
    },
    props: {
        slides: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            swiperOption: {
                slidesPerView: 4,
                spaceBetween: 30,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            },
        };
    },
};
</script>

<style lang="less" scoped>
.swiper {
  padding: 30px;
  .slide-wrapper {
      .picture {
          width: 100%;
      }
  }
}
</style>